<template>
    <div id="forthsurvey">
        <el-scrollbar>
            <el-container style=" margin: 100px 200px 120px 120px; ">
                <el-header style="padding: 0%;" height="20px">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/firstsurvey' }">第一轮调查</a></el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/secondsurvey' }">第二轮调查</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/thirdsurvey' }">第三轮调查
                        </el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/forthsurvey' }"><span style="color: brown;">第四轮调查</span>
                        </el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/resurltview' }">
                            <!-- <span  style="font-weight: bolder;">可视化结果分析</span> -->
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </el-header>
                <el-container style="background-color: #ffffff;">
                    <el-header style="    font-size: large;
                    font-weight: bold; line-height: 60px;">第三轮调查结果分析</el-header>
                    <el-container direction='vertical'>
                        <!-- <el-aside width="800px" style="text-align: center;"> -->
                        <el-row :gutter="20" style="text-align: center;margin: 15px auto 0;" type="flex" align="middle">
                            <el-col :span="12">
                                <div id="stackedBar" style="height:450px;width:650px;margin-top: 20px;"></div>
                            </el-col>
                            <!-- <el-col :span="12">
                                <div id="Full" style="height:450px;width:500px;margin-top: 20px;"></div>
                            </el-col> -->
                        </el-row>
                        <el-row :gutter="20"  >
                            <el-col :span="14" :offset="5" style="text-align:left;text-indent: 2em; padding-top: 2px;">
                                1.	王楚熠专家认为，要是自己的工作任务没完成，她可以回家继续完成，在ddl之前做完，但她并不认为这是正式的加班。
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="14" :offset="5" style="text-align:left;text-indent: 2em;padding-top: 2px;">
                                2.	管一莹专家给“自己工作任务没完成”这项指标给了最高分2分，其余指标均为0；
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="14" :offset="5" style="text-align:left;text-indent: 2em;padding-top: 2px;">
                                3.	胡冰越专家给“加班时间和频率合理”这两项指标给了0分，其余的均是1分;
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="14" :offset="5" style="text-align:left;text-indent: 2em;padding-top: 2px;">
                                4.	那文蕙专家给“加班频率合理”这项指标给了0分，“加班时间合理”这项指标给了1分，其余均是2分
                            </el-col>
                        </el-row>
                    </el-container>
                    <el-footer style="line-height: 40px;    color: #f17878;
                    font-weight: bolder;">
                        <el-button style=" color: #f17878;
                    font-weight: bolder;" type="text" @click="goToAnchor('#seco')">点击填写第四轮调查问卷<i
                                class="el-icon-download"></i></el-button>

                    </el-footer>
                </el-container>
                <el-divider></el-divider>
                <el-header style="text-align: right; font-size: 12px;padding:0;" height="20px">

                    <i class="el-icon-user-solid" style="margin-right: 5px"></i>
                    <span style="color:white;font-size: 13px;">尊敬的{{user.userClass}}：{{user.name}} 您好</span>
                </el-header>
                <el-container id="seco">
                    <el-aside width="600px" style=" background: #0000007a;">
                        <p class="neon">相关资料背景说明</p>
                        <el-divider>请点击对应链接查看</el-divider>
                        <div class="text">
                            <el-link type="primary" class="ellink"
                                href="https://gkml.samr.gov.cn/nsjg/bgt/202106/t20210610_330502.html" target="_blank"
                                icon="el-icon-document">
                                中华人民共和国劳动法</el-link>
                            <el-link type="primary" class="ellink" href="http://mbivip.com/article/30427.html"
                                target="_blank" icon="el-icon-document">
                                那些工作一天八小时(95后不加班)</el-link>

                            <el-link type="primary" class="ellink" href="https://www.docin.com/p-2098755368.html"
                                target="_blank" icon="el-icon-document">
                                95后新蓝领现状报告 </el-link>

                            <el-link type="primary" class="ellink" href="https://zhuanlan.zhihu.com/p/412592478"
                                target="_blank" icon="el-icon-document">
                                如何管理“95后”员工？</el-link>
                            <el-link type="primary" class="ellink" href="https://user.guancha.cn/main/content?id=685736"
                                target="_blank" icon="el-icon-document">
                                我是95后：我不愿加班，谁爱加谁加</el-link>
                            <el-link type="primary" class="ellink" href="https://www.sohu.com/a/192725626_401170"
                                target="_blank" icon="el-icon-document">
                                95后成职场新生力量，你真的了解它们吗？ </el-link>
                            <el-link type="primary" class="ellink" href="https://zhuanlan.zhihu.com/p/146775658"
                                target="_blank" icon="el-icon-document">
                                202022年95后用户画像研究报告</el-link>
                            <el-link type="primary" class="ellink" href="https://zhuanlan.zhihu.com/p/412592478"
                                target="_blank" icon="el-icon-document">拒绝加班的95后
                            </el-link>
                            <el-link type="primary" class="ellink"
                                href="https://www.zhihu.com/question/464985765/answer/1941585464" target="_blank"
                                icon="el-icon-document">
                                现在的95后指挥不动，下班准时走，活安排不下去只能自己干，怎么办？ </el-link>
                            <el-link type="primary" class="ellink" href="https://v.qq.com/x/page/p09231tsmwe.html"
                                target="_blank" icon="el-icon-video-camera">
                                加班竟成95后消遣新方式 </el-link>
                            <el-link type="primary" class="ellink" href="https://36kr.com/video/1638732441023748"
                                target="_blank" icon="el-icon-video-camera">
                                95后设计师加班猝死，被“加班文化”加速“去世”的年轻人</el-link>
                            <el-link type="primary" class="ellink" href="https://v.qq.com/x/page/b3332rx9bv5.html"
                                target="_blank" icon="el-icon-video-camera">
                                95后加班直接开怼老板：到点了我不走，在这给你守灵啊！ </el-link>

                        </div>
                        <!-- <el-divider></el-divider> -->
                    </el-aside>
                    <el-main width="600px" style=" background: rgb(255 255 255 / 60%);">
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left"
                            label-width="150px" class="demo-ruleForm">
                            <el-container>
                                <span style="    margin: 45px auto;
                                font-size: 25px;">指标评价评分</span>
                                <el-main style="padding: 0px 0px 0px 95px;">
                                    <el-form-item label="补贴" prop="butie">
                                        <el-radio-group v-model="ruleForm.butie">
                                            <el-radio label="2"></el-radio>
                                            <el-radio label="1"></el-radio>
                                            <el-radio label="0"></el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="加班工资" prop="jbgz">
                                        <el-radio-group v-model="ruleForm.jbgz">
                                            <el-radio label="2"></el-radio>
                                            <el-radio label="1"></el-radio>
                                            <el-radio label="0"></el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="加班时间合理" prop="sjhl">
                                        <el-radio-group v-model="ruleForm.sjhl">
                                            <el-radio label="2"></el-radio>
                                            <el-radio label="1"></el-radio>
                                            <el-radio label="0"></el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="加班频率合理" prop="jbpl">
                                        <el-radio-group v-model="ruleForm.jbpl">
                                            <el-radio label="2"></el-radio>
                                            <el-radio label="1"></el-radio>
                                            <el-radio label="0"></el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="自己工作任务没完成" prop="zjgz">
                                        <el-radio-group v-model="ruleForm.zjgz">
                                            <el-radio label="2"></el-radio>
                                            <el-radio label="1"></el-radio>
                                            <el-radio label="0"></el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-main>
                                <!-- <span
                                    style="text-align:left;color: rgb(255, 79, 79);">注释：“指标评价评分”指各指标对提高加班意愿的得分；“相对重要性”指指标对提高加班意愿的重要性排序，可相同</span> -->
                                <el-footer>
                                    <el-form-item label-width="0px" style="margin-top:20px;">
                                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                                    </el-form-item>
                                </el-footer>
                            </el-container>
                        </el-form>
                    </el-main>
                </el-container>
            </el-container>
        </el-scrollbar>
    </div>
</template>

<script>
    import axios from "axios";
    import * as echarts from 'echarts';

    export default {
        data() {
            return {
                src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                ruleForm: {
                    butie: '',
                    jbgz: '',
                    sjhl: '',
                    jbpl: '',
                    zjgz: '',

                },
                meansresult: {
                    wages: '',
                    imwages: '',
                    subsidy: '',
                    imsubsidy: '',
                    time: '',
                    imtime: '',
                    frequency: '',
                    imfrequency: '',
                    health: '',
                    imhealth: '',
                    task: '',
                    imtask: '',
                    atmosphere: '',
                    imatmosphere: '',
                    life: '',
                    imlife: '',
                    cause: '',
                    imcause: ''
                },
                user: {
                    userClass: '',
                    name: ''
                },
                rules: {

                    butie: [
                        { required: true, message: '请选择评分', trigger: 'change' }
                    ],

                    jbgz: [
                        { required: true, message: '请选择评分', trigger: 'change' }
                    ],

                    sjhl: [
                        { required: true, message: '请选择评分', trigger: 'change' }
                    ],

                    jbpl: [
                        { required: true, message: '请选择评分', trigger: 'change' }
                    ],
                    zjgz: [
                        { required: true, message: '请选择评分', trigger: 'change' }
                    ],
                }
            }
        },
        beforeCreat() {
            // 如果是跳转来的，则接受初始化参数
            this.getData();

            //         if (this.$route.query) {
            //     this.bookResult = this.$route.query.searchData;
            //     this.searchInfo = this.$route.query.searchInfo;
            //     this.blength = this.bookResult.length;
            //   }
        },
        mounted() {
            this.createstackedBar();
        },
        methods: {
            goToAnchor(selector) {
                this.$el.querySelector(selector).scrollIntoView();
            },
            getData() {
                var User = JSON.parse(sessionStorage.getItem('user'));
                this.user.name = User.uname;
                if (User.userClass == 'zuzhizhe') {
                    this.user.userClass = '组织者';
                } else if (User.userClass == 'zhuanjia') {
                    this.user.userClass = '专家';
                } else if (User.userClass == '游客') {
                    this.user.userClass = '游客';
                    this.user.name = NULL
                } else {
                    this.user.userClass = NULL;
                }
            },
            createstackedBar() {
                const self = this;
                // const self = this;
                // axiosstackedBar
                //     .get("http://127.0.0.1:5000/analyze")
                //     .then(
                //         response => {
                //             self.meansresult = response.data;
                var chartDom = document.getElementById('stackedBar');
                var myChart = self.$echarts.init(chartDom);
                var option;
                option = {
                    title: {
                        text: '得分频数分析图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // Use axis to trigger tooltip
                            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                        }
                    },
                    // yAxis: { // 纵轴标尺固定
                    //     type: 'value',
                    //     scale: true,
                    //     name: '得\n分\n频\n数\n分\n析\n图',

                    // },

                    legend: {
                        right: 5
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: ['补贴', '加班工资', '加班时间合理', '加班频率合理', '自己工作任务没完成']
                    },
                    series: [
                        {
                            name: '0',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [1, 1, 2, 3, 1]
                        },
                        {
                            name: '1',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [3, 1, 5, 5, 8]
                        },
                        {
                            name: '2',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [10, 12, 7, 6, 5]
                        }
                    ]
                };
                option && myChart.setOption(option);
                //     },
                //     response => {
                //         console.log("error");
                //         alert("请求失败");
                //     }
                // );

            },
          
            submitForm(formName) {
                var User = JSON.parse(sessionStorage.getItem('user'));
                if (User.id == '0') { alert("You should log in first!") }//设置必须登录才能答题
                else {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            //要传到后端的数据
                            var answer = {
                                id: User.id,
                                butie: this.ruleForm.butie,
                                jbgz: this.ruleForm.jbgz,
                                sjhl: this.ruleForm.sjhl,
                                jbpl: this.ruleForm.jbpl,
                                zjgz: this.ruleForm.zjgz,
                            }
                            var that = this;
                            // 对应 Python 提供的接口，这里的地址填写下面服务器运行的地址，本地则为127.0.0.1，外网则为 your_ip_address
                            const path = 'http://127.0.0.1:5000/addAnswer3rd';
                            axios({
                                method: 'post',
                                url: path,
                                data: answer
                            }).then(function (response) {
                                that.$message({
                                    message: 'Successfully saved!',
                                    type: 'success'
                                });

                            }).catch(function (error) {
                                console.log('Error' + error);
                                that.$message.error('提交错误请重试！！');
                            })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>


<style scoped>
    #forthsurvey {
        min-width: 1500px;
        height: 100%;
        background: url(../../assets/bg.jpg) no-repeat;
        background-size: cover;
        /* position: absolute; */
        background-attachment: fixed;

    }



    .text {
        width: 600px;
        /* height: 500px; */
        color: white;
        align-items: center;
        /* padding-top: 2px; */
    }


    .neon {
        color: #cce7f8;
        font-size: 28px;
        margin: 30px auto;
        -webkit-animation: shining 0.5s alternate infinite;
        animation: shining 0.5s alternate infinite;
    }

    @keyframes shining {
        from {
            text-shadow: 0 0 5px lightblue, 0 0 5px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;
        }

        to {
            text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;
        }
    }

    .ellink {
        color: white;
        font-size: 16px;
        margin: 15px 0;
        display: block;
    }


    .title {
        margin: 0px auto 40px auto;
        text-align: center;
    }

    .remember {
        margin: 0px 0px 35px 0px;
    }
</style>